<template>
  <div id="nav" class="my-bg1" v-if="isShow" :style="{width: $props.maxWidth,top:$props.top}">
    <li v-for="(value,key) in navArr" :key="key" :class="$route.path==value.key?'curr':''" @click="changeNav(value)">
      <div>
        <i class="icon iconfont" :class="value.icon"></i>
        <span v-text="value.name"></span>
      </div>
    </li>
  </div>
</template>

<script>
export default {
  name: "MyNav",
  props:{
    maxWidth:String,
    top:String,
  },
  data: function () {
    return {
      isShow:false,
      navArr: [
        {name: '首页', key: '/', icon: 'icon-shouye'},
        {name: '分类', key: '/ProductClassify', icon: 'icon-yingyong'},
        {name: '购物车', key: '/Cart', icon: 'icon-gouwuchekong'},
        {name: '订单', key: '/OrderList', icon: 'icon-dingdan'},
        {name: '我的', key: '/MemberHome', icon: 'icon-gerenzhongxin'},
      ]
    }
  },
  mounted() {
    this.checkShow()
  },
  methods:{
    changeNav:function (value){
      // this.currNav=value.key
      if (this.$route.path===value.key){
        return;
      }
      if (value.key==='MemberHome'){
        // if (!this.CurrUser.IsLogin()){
        //   this.$router.push("/Login")
        // }
      }
      this.$router.push(value.key)
      // console.log(this.currNav)
    },
    checkShow:function (){
      var isShow=false,$this=this
      this.navArr.forEach(function (value,index){
        if(value.key===$this.$route.path){
          isShow=true
        }
      })
      $this.isShow=isShow
      $this.$forceUpdate()
    }
  },
  watch:{
    $route:function (){
      // console.log('测试',this.$route.path)
      this.checkShow()
    }
  }
}
</script>

<style scoped>
#nav {
  position: fixed;
  width: 100%;
  height: 45px;
  padding-top: 5px;
  /*background: #FFFFFF;*/
  bottom: 0px;
  display: flex;
  z-index: 99;
  border-top: 1px solid #ECECEC;
}

#nav > li {
  flex: 1;
  height: 40px;
  line-height: 20px;
  /*background: #FFFFFF;*/
  text-align: center;
  position: relative;
}

#nav > li >div > i {
  display: block;
  position: relative;
  top: 5px;
  font-size: 22px;
  color: #888888
}

#nav > li >div > span {
  line-height: 20px;
  position: relative;
  top: 3px;
  color: #333333
}

#nav > li:nth-child(3) >div{
  border: 2px solid #f0f0f0;
  background: #de081e;
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 50%;
  position: absolute;
  z-index: 88;
  top: -18px;
  left: 5px;
}
#nav > li:nth-child(3) >div > i,#nav > li:nth-child(3) >div > span{
  color: #ffffff;
}

#nav > li.curr {
}

#nav > li.curr >div > i {
  color: #de081e
}

#nav > li.curr >div > span {
  color: #de081e
}

#nav > li.curr:nth-child(3) >div > i,#nav > li.curr:nth-child(3) >div > span{
  color: #ffffff;
}

</style>
